<template>
  <div id="dashbaord-card">
    <Card
      size="small"
      title="近期数据统计"
      :tab-list="tabListTitle"
      v-bind="$attrs"
      :active-tab-key="activeKey"
      @tab-change="onTabChange"
    >
      <VisitAnalysis ref="chart" />
    </Card>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Card } from 'ant-design-vue';
import VisitAnalysis from './VisitAnalysis.vue';
import { defHttp } from '/@/utils/http/axios';
// import VisitAnalysisBar from './VisitAnalysisBar.vue';

const activeKey = ref('tab1');
const tabListTitle = ref([]);
const chart = ref();
const list = ref([]);

function onTabChange(key) {
  activeKey.value = key;
  let find = list.value.find((item) => item.id == key);
  chart.value.init(find);
}

function getWaves() {
  defHttp.get({ url: '/Dashbord/get-project-wave' }).then((res) => {
    if (!res.data.length) {
      return;
    }

    list.value = res.data;

    tabListTitle.value = res.data.map((item) => {
      return {
        key: '' + item.id,
        tab: item.name,
        // x: item.xTimeList,
        // y: item.valueList,
      };
    });
    onTabChange('' + res.data[0].id);
  });
}

getWaves();
</script>

<style>
#dashbaord-card .ant-card-head {
  display: flex;
  /* width: 100%; */
  justify-content: space-between;
  align-items: center;
}

#dashbaord-card .ant-card-head-title {
  padding: 0;
  padding-top: 6px;
}

#dashbaord-card .ant-card-head-wrapper {
  flex-grow: 1;
}

#dashbaord-card .ant-tabs-nav-operations {
  display: none;
}
</style>
